<template>
  <div>
    <div class="shop">
      <router-link :to="'/detail/' + detail.sid" class="hairlines-bottom">
        <img :src="detail.pic">
        <p>{{detail.name}}</p>
        <i class="iconfont icon-more"></i>
      </router-link>
    </div>
    <div class="info">
      <p class="order">订单号：{{detail.out_trade_no}}</p>
      <p class="pay-way">支付方式：全款支付</p>
      <p class="time" v-if='detail.status === "2"'>完成时间：{{detail.pay_time}}</p>
      <p class="time" v-else>状态：待支付</p>
      <p class="price">消费金额：{{'￥' + detail.total_money}}</p>
    </div>
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  import $ from 'edom'

  export default {
    name: 'orderDetail',
    data () {
      return {
        title: '爱尚丰',
        id: 0,
        detail: {
          sid: null
        }
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      getOrderDetail () {
        this.axios.post('/api/order/detail', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          order_id: this.$route.params.id
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            $().Mnews('工程师喂猫去了', 2000)
            return
          }
          let desc = data.desc
          this.detail = desc
        })
      }
    },
    created () {
      this.setTitle(this.title)
      this.getOrderDetail()
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .shop{
    background: #fff;
    padding: 0 rem(24);
    a{
      display: flex;
      padding: rem(25) 0;
      align-items: center;
    }
    img{
      margin-right: rem(15);
      width: rem(40);
      height: rem(40);
      border-radius: 4px;
    }
    p{
      flex: 1;
      font-size: rem(28);
      color: #141414;
      font-weight: 600;
    }
    .iconfont:before{
      font-size: 12px;
      color: #999;
    }
  }
  .info{
    background: #fff;
    padding: rem(35) rem(24) rem(50);
    font-size: rem(26);
    color: #666;
    p{
      margin-bottom: rem(20);
    }
    p:last-child{
      margin-bottom: 0;
    }
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: rem(100);
  }
</style>

